import { useCallback, useRef, useState } from 'react';
import { Table, Space, Button } from "antd";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { updateIndex } from '../../services/class';
import './index.css';
const { Column } = Table;
const type = 'DraggableBodyRow';
const DraggableBodyRow = ({
    index,
    moveRow,
    className,
    style,
    ...restProps
}) => {
    const ref = useRef(null);
    const [{ isOver, dropClassName }, drop] = useDrop({
        accept: type,
        collect: (monitor) => {
            const { index: dragIndex } = monitor.getItem() || {};
            if (dragIndex === index) {
                return {};
            }
            return {
                isOver: monitor.isOver(),
                dropClassName:
                    dragIndex < index
                        ? " drop-over-downward"
                        : " drop-over-upward",
            };
        },
        drop: (item) => {
            moveRow(item.index, index);
        },
    });
    const [, drag] = useDrag({
        type,
        item: {
            index,
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    });
    drop(drag(ref));
    return (
        <tr
            ref={ref}
            className={`${className}${isOver ? dropClassName : ""}`}
            style={{
                cursor: "move",
                ...style,
            }}
            {...restProps}
        />
    );
};
function List(props) {
    const data = useState([]);
    const components = {
        body: {
            row: DraggableBodyRow,
        },
    };
    const moveRow = useCallback(
        async (dragIndex, hoverIndex) => {
            let incOrDec = 1;
            if(dragIndex < hoverIndex){
                incOrDec = -1
            }
            await updateIndex(props.classes[dragIndex]._id,props.classes[hoverIndex].index,incOrDec);
            props.show();
      
        },
        [props.classes],
      );
    return (
        <DndProvider backend={HTML5Backend}>
            <Table dataSource={props.classes} rowKey="_id" components={components}
                onRow={(_, index) => {
                    const attr = {
                      index,
                      moveRow,
                    };
                    return attr;
                  }}
            >
                <Column title="排序" dataIndex="index" key="index" />
                <Column title="班级名称" dataIndex="name" key="name"></Column>
                <Column title="班级人数" dataIndex="count" key="count" />
                <Column
                    title="创建时间"
                    dataIndex="createDate"
                    key="createDate"
                />

                <Column
                    title="操作"
                    key="action"
                    render={(_, record) => (
                        <Space size="middle">
                            <Button type="primary" onClick={(e) => {}}>
                                修改
                            </Button>
                            <Button type="primary" danger onClick={(e) => {}}>
                                删除
                            </Button>
                        </Space>
                    )}
                />
            </Table>
        </DndProvider>
    );
}
export default List;
